<template>
  <div class="demo-inner-divider">基本用法</div>
  <e-card style="width: 100%" to="//www.baidu.com" target="_blank" append>
    <template #title>
      <e-icon type="share1"></e-icon>
      Classic film
    </template>
    <template #extra>
      <a href="#" @click.prevent="changeLimit">
        <e-icon type="label"></e-icon>
        Change
      </a>
    </template>
    <p class="rate-demo" v-for="(item, index) in randomMovieList" :key="index">
      <a :href="item.url" target="_blank">{{ item.name }}</a>
      <span> {{ item.rate }} </span>
    </p>
  </e-card>
  <div class="demo-inner-divider">无边框</div>
  <div style="background: #eee; padding: 20px">
    <e-card :bordered="false">
      <template #title>No border title</template>
      <p>
        Content of no border type. Content of no border type. Content of no
        border type. Content of no border type.
      </p>
    </e-card>
  </div>
  <div class="demo-inner-divider">禁用悬停阴影</div>
  <div>
    <e-row>
      <e-col span="11">
        <e-card shadow="hover">
          <template #title>The standard card</template>
          <p>Content of card</p>
          <p>Content of card</p>
          <p>Content of card</p>
        </e-card>
      </e-col>
      <e-col span="11" offset="2">
        <e-card shadow="never">
          <template #title>Disable card with hover shadows</template>
          <p>Content of card</p>
          <p>Content of card</p>
          <p>Content of card</p>
        </e-card>
      </e-col>
    </e-row>
  </div>
  <div class="demo-inner-divider">卡片阴影</div>
  <div>
    <e-row style="background: #eee; padding: 20px" :gutter="12">
      <e-col span="8">
        <e-card :bordered="true">
          <template #title>Borderless card</template>
          <h1>hover</h1>
        </e-card>
      </e-col>
      <e-col span="8">
        <e-card shadow="always">
          <template #title>Use a card with a shadow effect</template>
          <h1>always</h1>
        </e-card>
      </e-col>
      <e-col span="8">
        <e-card shadow="never">
          <template #title>Use a card with a shadow effect</template>
          <h1>never</h1>
        </e-card>
      </e-col>
    </e-row>
  </div>
  <div class="demo-inner-divider">简洁卡片</div>
  <e-card style="width: 320px">
    <div style="text-align: center">
      <img
        src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
      />
      <h3>Yummy hamburger</h3>
    </div>
  </e-card>
  <card-md class="markdown-body"></card-md>
</template>
<script>
import cardMd from "../../docs/card.md"

export default {
  data() {
    return {
      movieList: [
        {
          name: 'The Shawshank Redemption',
          url: 'https://movie.douban.com/subject/1292052/',
          rate: 9.6,
        },
        {
          name: 'Leon:The Professional',
          url: 'https://movie.douban.com/subject/1295644/',
          rate: 9.4,
        },
        {
          name: 'Farewell to My Concubine',
          url: 'https://movie.douban.com/subject/1291546/',
          rate: 9.5,
        },
        {
          name: 'Forrest Gump',
          url: 'https://movie.douban.com/subject/1292720/',
          rate: 9.4,
        },
        {
          name: 'Life Is Beautiful',
          url: 'https://movie.douban.com/subject/1292063/',
          rate: 9.5,
        },
        {
          name: 'Spirited Away',
          url: 'https://movie.douban.com/subject/1291561/',
          rate: 9.2,
        },
        {
          name: "Schindler's List",
          url: 'https://movie.douban.com/subject/1295124/',
          rate: 9.4,
        },
        {
          name: 'The Legend of 1900',
          url: 'https://movie.douban.com/subject/1292001/',
          rate: 9.2,
        },
        {
          name: 'WALL·E',
          url: 'https://movie.douban.com/subject/2131459/',
          rate: 9.3,
        },
        {
          name: 'Inception',
          url: 'https://movie.douban.com/subject/3541415/',
          rate: 9.2,
        },
      ],
      randomMovieList: [],
    }
  },
  methods: {
    changeLimit() {
      function getArrayItems(arr, num) {
        const temp_array = []
        for (let index in arr) {
          temp_array.push(arr[index])
        }
        const return_array = []
        for (let i = 0; i < num; i++) {
          if (temp_array.length > 0) {
            const arrIndex = Math.floor(Math.random() * temp_array.length)
            return_array[i] = temp_array[arrIndex]
            temp_array.splice(arrIndex, 1)
          } else {
            break
          }
        }
        return return_array
      }
      this.randomMovieList = getArrayItems(this.movieList, 5)
    },
  },
  components:{
    cardMd
  },
  mounted() {
    this.changeLimit()
  },
}
</script>
<style scoped>
.rate-demo {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
